<template>
	<view class="page-rank">
		<image src="https://imgcdn.tutudati.com/bgc.png" class="bgc" mode="scaleToFill" />
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-black">{{content.title}}</text>
			</view>
		</tn-nav-bar>

		<!-- 分类 -->
		<view class="" :style="{paddingTop: vuex_custom_bar_height - 10 + 'px'}">
			<view class="tabs">
				<view class="item" :class="{ 'is-active': item.value == active }" v-for="(item, index) in tabs"
					:key="index" @click="select(item)">
					<text>{{ item.label }}</text>
				</view>
			</view>
		</view>

		<view class="forward">
			<view class="item" :class="[`is-${index + 1}`]" v-for="(item, index) in forward" :key="index">
				<view class="avatar">
					<image :src="item.icon" mode="aspectFit" class="avatar-bgc" />
					<view class="icon">
						<image class="i-img" :src="item.avatar" mode="aspectFit" style="border-radius: 50%;" />
					</view>
				</view>
				<view class="infon">
					<view class="name">
						<text>{{ item.nickname }}</text>
					</view>
					<view class="votes">
						<text>{{ item.score.toFixed(2) }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 名区域背景图 -->
		<view class="rank-bgc">
			<image class="r-img" src="https://imgcdn.tutudati.com/rank.png" mode="aspectFit" />
		</view>

		<!-- 排名列表 -->
		<view class="list" v-if="list.length > 0">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="number">
					<text>{{ index + 4 }}</text>
				</view>
				<view class="avatar">
					<image class="a-img" :src="item.avatar" mode="aspectFit" />
				</view>
				<view class="name">
					<text>{{ item.nickname }}</text>
				</view>
				<view class="votes">
					<text>{{ item.score.toFixed(2) }}</text>
				</view>
			</view>
			<view style="padding-top: 40rpx;" v-if="list.length > 20">
				<tn-load-more :status='nomore' :loadText="{nomore:'只展示前50名 未上榜需要加油了哦'}"></tn-load-more>
			</view>
		</view>
		<!-- 排名列表结束 -->

		<view class="tn-tabbar-height"></view>

		<!-- 当前用户排名 -->
		<!-- <view class="user-self-rank user-rank">
			<view class="item">
				<view class="number">
					<view class="">{{ currentUserRank.rank_value }}</view>
				</view>
				<view class="avatar">
					<image class="a-img" :src="currentUserRank.avatar" mode="aspectFit" />
				</view>
				<view class="name">
					<text>{{ currentUserRank.nickname }}</text>
				</view>
				<view class="votes">
					<text>{{ currentUserRank.total_score.toFixed(2) }}</text>
				</view>
			</view>
		</view> -->
		<!-- 当前用户排名结束 -->

		<view>
			<tn-modal v-model="show" :title="title" :content="content" :button="button" @click="btnClick"></tn-modal>
		</view>

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import {
		getSubmitRankList,
		getRankListByCollection
	} from "@/utils/api/exam.js"
	export default {
		name: "RankList",
		mixins: [template_page_mixin],
		data() {
			return {
				show: false,
				title: '消息提醒操作',
				content: '每1小时更新一次，距离更新还有10分钟',
				button: [{
						text: '暂不关闭',
						backgroundColor: '#FBBD12',
						fontColor: '#FFFFFF',
						shape: 'round'
					},
					{
						text: '关闭提醒',
						backgroundColor: 'tn-bg-indigo',
						fontColor: '#FFFFFF'
					}
				],
				currentUserRank: {
					rank_value: '暂未上榜',
					total_score: 0,
					avatar: 'https://imgcdn.tutudati.com/xiaomai1.jpg',
					nickname: '我的昵称',
				},
				active: 1,
				tabs: [{
						label: "日榜",
						value: 1
					},
					{
						label: "周榜",
						value: 2
					},
					{
						label: "月榜",
						value: 3
					}
				],
				forward: [],
				list: [],
				collectionUid: "",
			}
		},
		onLoad(options) {
			this.collectionUid = options.collection_uid || ""
			if (this.collectionUid != "") {
				this.getRankListByCollection()
			} else {
				this.getRankList()
			}
		},
		onShow() {
			this.showRankNotify()
		},
		methods: {
			showRankNotify() {
				let cacheValue = uni.getStorageSync("close_rank_notify") || ""
				if (cacheValue != "yes") {
					this.show = true
				}
			},
			getRankList() {
				getSubmitRankList({type: this.active}).then(res => {
					for (let i = 0; i < res.data.items.length; i++) {
						if (i < 3) {
							res.data.items[i].icon = "/static/" + i + ".png"
							this.forward[i] = res.data.items[i]
						}
					}
					let len = this.forward.length
					for (let i = 0; i < (3 - len); i++) {
						this.forward[len + i] = {
							nickname: "待定",
							icon: "/static/" + (len + i) + ".png",
							score: 0.00,
							avatar: 'https://imgcdn.tutudati.com/uploads/images/20230913/20230913222141984a29387.jpg'
						}
					}
					let rank1 = this.forward[0]
					let rank2 = this.forward[1]
					let rank3 = this.forward[2]
					this.forward[0] = rank2
					this.forward[1] = rank1
					this.forward[2] = rank3
					this.list = res.data.items.slice(3, res.data.items.length)
				})
			},
			getRankListByCollection() {
				getRankListByCollection({
					uid: this.collectionUid,
					page: 1,
					size: 50,
					type: this.active
				}).then(res => {
					if (res.code == 100) {
						for (let i = 0; i < res.data.items.length; i++) {
							if (i < 3) {
								res.data.items[i].icon = "/static/" + i + ".png"
								this.forward[i] = res.data.items[i]
							}
						}
						let len = this.forward.length
						for (let i = 0; i < (3 - len); i++) {
							this.forward[len + i] = {
								nickname: "待定",
								icon: "/static/" + (len + i) + ".png",
								score: 0.00,
								avatar: 'https://imgcdn.tutudati.com/uploads/images/20230913/20230913222141984a29387.jpg'
							}
						}
						let rank1 = this.forward[0]
						let rank2 = this.forward[1]
						let rank3 = this.forward[2]
						this.forward[0] = rank2
						this.forward[1] = rank1
						this.forward[2] = rank3
						this.list = res.data.items.slice(3, res.data.items.length)
						return
					}
					this.$func.showTotast(res.msg)
				})
			},
			select(item) {
				this.active = item.value
				if (this.collectionUid == "") {
					this.getRankList()
				} else {
					this.getRankListByCollection()
				}
			},
			btnClick(e) {
				this.show = false
				if (e.index === 1) { // 关闭弹窗提示
					uni.setStorageSync("close_rank_notify", "yes")
				}
			},
			// 微信订阅消息
			async subscribe() {
				let subscribeResult = await this.$func.templateSubscribe(getApp().globalData.rankUpdateTemplateId)
				let code = subscribeResult.code || 0
				if (code == 100) {
					this.$func.showToast("订阅成功")
					return
				}
				this.$func.showToast("订阅失败")
			},
		},
	}
</script>

<style lang="scss">
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	.user-self-rank {
		position: fixed;
		z-index: 9999;
		bottom: 0rpx;
		width: 100%;
		padding: 0;
		border: 2rpx solid #FFA62D;
		border-bottom: none;
		background-color: #fff;
		.item {
			display: flex;
			align-items: center;
			height: 114rpx;
			padding: 0 25rpx;
			border-bottom: solid 1rpx #f3f3f3;
			font-size: 30rpx;
		
			.number {
				margin-right: 27rpx;
				font-weight: 400;
				color: #333333;
			}
		
			.avatar {
				width: 67rpx;
				height: 67rpx;
				margin-right: 90rpx;
				border-radius: 50%;
				overflow: hidden;
		
				.a-img {
					width: 100%;
					height: 100%;
				}
			}
		
			.name {
				font-weight: 400;
				color: #333333;
				flex: 1;
			}
		
			.votes {
				font-weight: 400;
				color: #d18bda;
			}
		}
	}

	.page-rank {
		.bgc {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.tabs {
			display: flex;
			align-items: center;
			width: 582rpx;
			height: 94rpx;
			margin: 0 auto;
			margin-top: 58rpx;
			margin-bottom: 104rpx;
			background-color: #ff5fdc;
			border-radius: 47rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #fffeff;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				text-align: center;
				flex: 1;

				&.item:first-child {
					border-right: solid 1rpx rgba(255, 255, 255, 0.1);
				}

				&.is-active {
					color: #ffc3f2;
					flex: 1;
				}
			}
		}

		.forward {
			display: flex;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				flex: 1;
				z-index: 9;

				.avatar {
					position: relative;

					&-bgc {
						width: 156rpx;
						height: 190rpx;
					}

					.icon {
						position: absolute;
						top: calc(50% - 56rpx);
						left: calc(50% - 68rpx);
						width: 136rpx;
						height: 136rpx;
						border-radius: 50%;

						.i-img {
							width: 136rpx;
							height: 136rpx;
						}
					}
				}

				.infon {
					text-align: center;

					.name {
						display: flex;
						justify-content: center;
						align-items: center;
						// width: auto;
						// width: 100rpx;
						height: 74rpx;
						padding: 10rpx;
						background: #ffca47;
						border-radius: 37rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #fffeff;
					}

					.votes {
						font-size: 32rpx;
						font-weight: 500;
						color: #fffeff;
					}
				}

				&.is-1 {
					position: relative;
					left: 20rpx;
					bottom: -126rpx;

					.avatar {
						margin-bottom: 10rpx;
					}

					.infon {
						transform: rotate(350deg);
					}
				}

				&.is-2 {
					.avatar {
						margin-bottom: 10rpx;

						&-bgc {
							width: 176rpx;
							height: 209rpx;
						}

						.icon {
							position: absolute;
							top: calc(50% - 58rpx);
							left: calc(50% - 78rpx);
							width: 146rpx;
							height: 146rpx;
							border-radius: 50%;

							.i-img {
								width: 146rpx;
								height: 146rpx;
							}
						}
					}

					.name {
						margin-bottom: 33rpx;
					}
				}

				&.is-3 {
					position: relative;
					right: 20rpx;
					bottom: -126rpx;

					.avatar {
						margin-bottom: 10rpx;
					}

					.infon {
						transform: rotate(10deg);
					}
				}
			}
		}

		.rank-bgc {
			display: flex;
			justify-content: center;
			width: 100%;
			margin-top: -150rpx;

			.r-img {
				width: 656rpx;
				height: 492rpx;
			}
		}

		.list {
			position: relative;
			margin-top: -44rpx;
			padding: 0 30rpx 30rpx 30rpx;
			background: #ffffff;
			border-radius: 30rpx 30rpx 0 0;
			z-index: 99;

			.item {
				display: flex;
				align-items: center;
				height: 114rpx;
				padding: 0 25rpx;
				border-bottom: solid 1rpx #f3f3f3;
				font-size: 30rpx;

				.number {
					margin-right: 27rpx;
					font-weight: 400;
					color: #333333;
				}

				.avatar {
					width: 67rpx;
					height: 67rpx;
					margin-right: 90rpx;
					border-radius: 50%;
					overflow: hidden;

					.a-img {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					font-weight: 400;
					color: #333333;
					flex: 1;
				}

				.votes {
					font-weight: 400;
					color: #d18bda;
				}
			}
		}
	}
	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(180rpx + env(safe-area-inset-bottom) / 2);
		height: calc(180rpx + constant(safe-area-inset-bottom));
	}
</style>